<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3年级数学暑假作业</title>
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/vue/2.2.4/vue.min.js"></script>
<style>
.center{
    text-align: center;
}
.t1{
    height:140px;
}
.bb{
    border-bottom:1px solid #333;
}
.bb,.bbw{
    width:20px;
    text-align: center;
    padding:0;
}
span{
    position: relative;
    top:-10px;
}
.t4{
    position: relative;
    top:-20px;
}
h3{
    margin-bottom:10px;
}
</style>
</head>
<body class="container">
<div id="app">
    <h3 class="center">三年级数学暑假作业</h3>
    <h4>竖式计算</h4>
    <div class="row">
        <div class="col-xs-6 t1" v-for="(v,i) in arr">{{v}}</div>
        <div class="col-xs-6 t1" v-for="v in arr2">{{v}}</div>
        <div class="col-xs-6 t1">{{t3}}</div>
        <div class="col-xs-6 t4">
            <span>口算：</span>
            <div class="row">
                <div class="col-xs-3 bb">{{t4.a}}</div>
                <div class="col-xs-3"></div>
                <div class="col-xs-3 bb">{{t4.b}}</div>
            </div>
            <div class="row">
                <div class="col-xs-3 bbw">{{t4.c}}</div>
                <div class="col-xs-3 center">
                    <span>{{t4.type}}</span>
                </div>
                <div class="col-xs-3 bbw">{{t4.c}}</div>
                <div class="col-xs-3">
                    <span>=</span>
                </div>
            </div>
        </div>
    </div>
    <h4>脱式运算</h4>
    <div class="row">
        <div class="col-xs-6" v-for="v in arr5">{{v}}</div>
    </div>
  
</div>
</body>
</html>
<script>
/* 
2道三位数除以一位数的竖式计算，要求验算。
4道两位数乘两位数的竖式计算，使用拆数法、表格法来验算。
1道小数加减法的竖式计算。
1道同分母分数加减法的口算。
2道四则运算混合运算的脱式计算。
*/
function rand(min,max){
    return Math.round(Math.random()*(max-min))+min;
}

new Vue({
    el:"#app",
    data:{
        types:[" ÷ "," × "," + "," - "],
        arr:[],
        arr2:[],
        t3:"",
        t4:{
            a:0,
            b:0,
            c:0,
        },
        arr5:[],
    },
    created(){
        this.init();
    },
    methods:{
        init(){
            for(var i=1;i<=2;i++){
                let str=rand(100,999)+" ÷ " + rand(1,9)+" = ";
                this.arr.push(str);
            }
            for(var i=1;i<=4;i++){
                let str=rand(10,99)+" × "+rand(10,99)+" = ";
                this.arr2.push(str);
            }
            this.t3=this.xiaoshu();
            this.fenshu();
            this.mix();
        },
        xiaoshu(){
            let a = rand(10,99)/10;
            let b = rand(10,99)/10;
            let i=rand(2,3);
            let type=this.types[i];
            if(i==2){
                return a+type+b+" = ";
            }
            if(a>=b){
                return a+type+b+" = ";
            }
            return b+type+a+" = ";
        },
        fenshu(){
            let a=rand(1,5);
            let b=rand(1,5);
            let c=rand(10,20);
            let i=rand(2,3);
            let type=this.types[i];
            if(i==2){
                this.t4={
                    a,
                    b,
                    c,
                    type,
                }
            }else{
                this.t4={
                    a:Math.max(a,b),
                    b:Math.min(a,b),
                    c,
                    type,
                }
            }
        },
        mix(){
            for(var i=0;i<2;i++){
                let a=rand(1,9);
                let b=a*rand(10,99);
                let str=rand(1,99)+" + "+b+this.types[0]+a;
                this.arr5.push(str);
            }
        }
    }
})
</script>